<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <!-- 引入react依赖库,注意顺序,当前版本: v17.0.2 -->
  <!-- <script src="lib/react/react.development.js"></script>
  <script src="lib/react/react-dom.development.js"></script> -->
  <script crossorigin src="https://unpkg.com/react@17/umd/react.development.js"></script>
  <script crossorigin src="https://unpkg.com/react-dom@17/umd/react-dom.development.js"></script>
  <!-- 引入babel库,用于解析jsx语法
    # https://www.babeljs.cn/setup#installation
  -->
  <script crossorigin src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
</head>
<style >
    .danger{
      color: rgb(55, 0, 255);
    }
    .large{
      font-size: 30px;
    }
</style>
</style>
<body>
  <div id="root"></div>

  <!-- 这里不是原生的javascript语法,而是特殊的jsx(javascript+xml)语法,需要用babel解析. -->
  <script type="text/babel">
  class HelloWorld extends React.Component {
      componentDidMount(){
        console.log('组件渲染完毕...');
      }
      componentWillUnMount(){
        console.log('组件即将销毁...');
      }
      render(){
        console.log('render...')
        return (
          <div className={'danger large'}>
            <h2>倒计时</h2>
            { /* className和class属性是一样的,而且必须是驼峰 */ }
            <span>{ new Date().toString() }</span>
          </div>
        )
      }
    }
    // 通过调用React自身方法render可以得到当前组件的实例对象,并渲染到页面容器.
    ReactDOM.render(<HelloWorld />,document.getElementById('root'));
  </script>
</body>

</html>